>La différence entre les éléments iframe, embed et object
HTML5 définit plusieurs éléments de contenu intégrés, qui, d'un point de vue d'oiseau, semblent être très similaires au point d'être en grande partie identiques.
Quelle est la différence entre iframe , embed et object ?
Si je veux intégrer un fichier HTML d'un site tiers, lequel de ces éléments pourrais-je utiliser, et en quoi diffèrent-ils?
‹iframe›
L'élément iframe représente un contexte de navigation imbriqué. HTML 5 standard - "L'élément ‹iframe› "
Principalement utilisé pour inclure des ressources provenant d'autres domaines ou sous-domaines, mais peut également être utilisé pour inclure du contenu provenant du même domaine. La force de ‹iframe› est que le code incorporé est 'live' et peut communiquer avec le document parent.
‹embed›
Standardisé en HTML 5, il était auparavant un tag non standard, qui a certes été implémenté par tous les principaux navigateurs. Comportement avant HTML 5 peut varier ...
L'élément embed fournit un point d'intégration pour une application externe (généralement non-HTML) ou un contenu interactif. ( HTML 5 standard - "L'élément ‹embed› " )
Utilisé pour incorporer du contenu pour les plugins du navigateur. Les exceptions à ceci sont SVG et HTML qui sont traitées différemment selon la norme.
Les détails de ce qui peut et ne peut pas être fait avec le contenu incorporé dépendent du plugin du navigateur en question. Mais pour SVG vous pouvez accéder au document SVG embarqué du parent avec quelque chose comme:
svg = document.getElementById("parent_id").getSVGDocument();
Depuis l'intérieur d'un document SVG ou HTML intégré, vous pouvez atteindre le parent avec:
parent = window.parent.document;
Pour le HTML incorporé, il n'y a aucun moyen d'obtenir le document incorporé du parent (que j'ai trouvé).
‹object›
L'élément ‹object› peut représenter une ressource externe, qui, selon le type de la ressource, sera traitée comme une image, comme un contexte de navigation imbriqué, ou comme une ressource externe à traiter par un plugin. ( HTML 5 standard - "L'élément ‹object› " )
Conclusion
Sauf si vous incorporez du SVG ou quelque chose de statique, vous devriez probablement utiliser ‹iframe› . Pour inclure SVG, utilisez ‹embed› (si je me souviens bien, ‹object› ne vous laissera pas scripter *). Honnêtement, je ne sais pas pourquoi vous utiliseriez ‹object› sauf pour les navigateurs plus anciens ou flash (avec lesquels je ne travaille pas).
Comme indiqué dans les commentaires ci-dessous; les scripts dans ‹object› vont s'exécuter mais les contextes parent et enfant ne peuvent pas communiquer directement. Avec ‹embed› vous pouvez obtenir le contexte de l'enfant du parent et vice versa. Cela signifie qu'ils peuvent utiliser des scripts dans le parent pour manipuler l'enfant, etc. Cette partie n'est pas possible avec ‹object› ou ‹iframe› où vous devrez configurer un autre mécanisme à la place, tel que l'API JavaScript postMessage .
Une autre raison d'utiliser l' object sur iframe est que les sous-ressources object (quand un ‹object› effectue HTTP requêtes HTTP ) sont considérées comme passive/display en termes de Mixed content , ce qui signifie qu'il est plus sécurisé lorsque vous devez avoir un Mixed content .
Le contenu mixte signifie que lorsque vous avez https mais que votre ressource provient de http .
